<template>
  <div id="board"  class="app-container">
    <div class="header">
      <div class="left_underline"></div>
      <div class="title">{{device.name}}</div>
      <div class="right_underline"></div>
    </div>
    <div class="container">
      <div class="container_left">
        <box title="单台设备状态">
          <div class="eachart_box" id="box-1"></div>
        </box>
        <box>
          <div class="eachart_box" id="box-2" @click="update"></div>
        </box>
        <box>
          <div class="eachart_box" id="box-3"></div>
        </box>
      </div>
      <div class="container_center">
        <div class="container_center_top"></div>
        <div class="container_center_bottom" id="barline"></div>
      </div>
      <div class="container_right">
        <box title="产量">
          <div class="eachart_box" id="box-4"></div>
        </box>
        <box>
          <div class="eachart_box" id="box-5"></div>
        </box>
        <box>
          <div class="eachart_box" id="box-6"></div>
        </box>
      </div>
    </div>
  </div>
</template>

<script>
import {Pie,Gauge,Bar,BarLine} from '@/utils/draw'

export default {
  name: 'demo',
  data() {
    return {
      workshop: {
        id: null
      },
      device: {
        name: '数据可视化'
      }
    }
  },
  created() {
    this.getWorkshop()
  },
  mounted() {
    this.drawPie()
  },
  beforeDestroy() {

  },
  methods: {
    getWorkshop() {
      let id =  window.localStorage.getItem('kanban_workshopId')
      if(id) {
        this.workshop.id = parseInt(id)
      } else {
        this.$alert('请选择车间', '提示', {
          confirmButtonText: '确定'
        });
      }
    },
    drawPie(){
      let pieData = [
        {value: 1048, name: '待机'},
        {value: 735, name: '故障'},
        {value: 580, name: '运行中'},
        {value: 484, name: '关机'}
      ]
      this.pie= new Pie(pieData,document.getElementById('box-1'))
    },
    update() {
      this.pie.updated({
        data:[
          {value: 1048, name: '待机'},
          {value: parseInt(Math.random()*1000), name: '故障'},
          {value: 580, name: '运行中'},
          {value: 484, name: '关机'}
        ]
      })
    }
  }
}
</script>

<style scoped>
#board {
  position: absolute;
  width: 100%;
  /* height: 100%; */
  background: url('./bg.jpg') no-repeat;
  background-size: cover;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.header{
  display: flex;
  height: 50px;
  flex-shrink: 0;
  overflow: hidden;
}
.title{
  width: 350px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  line-height: 70px;
}
.left_underline{
  flex: 1;
  border-bottom: 1px solid #26c6f0;
  margin-left: 40px;
}
.right_underline{
  flex: 1;
  border-bottom: 1px solid #26c6f0;
  margin-right: 40px;
}
.container{
  display: flex;
  flex: 1;
  margin-bottom: 10px;
}
.container_left{
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container_center{
  flex: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container_center_top{
  flex: 1;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  background: red;
}
.container_center_bottom{
  flex: 1;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.container_right{
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container .box{
  margin-top: 25px;
  flex: 1;
}
.eachart_box{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
</style>
